<%--
  Created by IntelliJ IDEA.
  User: cyliu
  Date: 2023/12/19
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        .container {
            width: 1200px;
            height: 1000px;
            margin: 0 auto;
            background-color: blanchedalmond;
            border-radius: 20px;
        }

        .nav ul li {
            font-size: 20px;
            list-style: none;
            float: left;
            margin-left: 20px;
            border: 1px solid black;
            border-radius: 5px 5px 0px 0px;
            padding: 0px 5px 0px 5px;
        }

        .content {
            /*清除浮动*/
            clear: both;
        }

        .content table {
            color: red;
            font-size: 20px;
            margin: 0 auto;
        }

        .content table tr td {
            padding: 5px 40px 5px 40px;
        }

        .s {
            margin-left: 500px;
        }

        /*.ns{*/
        /*    width: 5px;*/
        /*}*/
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <img src="${pageContext.request.contextPath}/img/logo.jpg" width="100px" alt="">
        </div>
        <div class="msg"></div>
        <div>
            <c:if test="${sessionScope.loginUser == null}">
                <h2>欢迎您，请登录</h2>
            </c:if>
            <c:if test="${sessionScope.loginUser != null}">
                <h2>
                    欢迎您，${sessionScope.loginUser.name}
                    &nbsp;<a href="${pageContext.request.contextPath}/user/logout">注销</a>
                </h2>
            </c:if>
        </div>
    </div>
    <div class="nav">
        <ul>
            <li><a href="${pageContext.request.contextPath}">首页</a></li>
            <li><a href="${pageContext.request.contextPath}/menu/show_menu">查看菜品</a></li>
            <li><a href="${pageContext.request.contextPath}/user/login">用户登录</a></li>
            <li><a href="${pageContext.request.contextPath}/user/reg">用户注册</a></li>
            <li><a href="${pageContext.request.contextPath}/order/show_my_order">我的订单</a></li>

        </ul>

    </div>
    <div class="content">
        <c:if test="${sessionScope.loginUser.roleId == 1}">
            <a href="${pageContext.request.contextPath}/menu/add_menu">添加菜品</a>
        </c:if>

        <form action="${pageContext.request.contextPath}/order/do_add_order">
            <table>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>数量</th>
                    <th>价格</th>

                </tr>
                <c:forEach items="${ods}" var="o" varStatus="s">
                    <tr>
                        <td>${s.count}</td>
                        <td>${o.menu.menuName}</td>
                        <td>${o.count}</td>
                        <td class="odp">${o.orderDetailPrice}</td>
                    </tr>
                </c:forEach>
                <tr>
                    <td>总价</td>
                    <td id="tp"></td>
                </tr>
            </table>
            <a href="${pageContext.request.contextPath}/order/confirm_order">确认订单</a>
        </form>

    </div>

</div>
<script src="${pageContext.request.contextPath}/js/jquery3.6.1.js"></script>
<script>

    let odps = document.getElementsByClassName("odp");

    let tp = 0;
    for (let i = 0; i < odps.length; i++) {

        console.log(odps[i].innerHTML);

        let odp = Number.parseFloat(odps[i].innerHTML);

        console.log(odp)
        tp = tp + odp;
    }

    console.log(tp);

    $("#tp").html(tp);
</script>
</body>
</html>
